<template>
  <div>
    <!-- lementUI中的el-menu有一个属性，叫做default-active，表示当前激活菜单的index，面包屑是通过$route展示的，$route中有path，表示要跳转的页面的路由地址 
    :default-active = "$route.path"  就表示激活要跳转的页面的导航菜单 
    router  是否使用vue-router路由模式，启用后点击菜单时会以index作为path进行路由跳转
    -->
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#d3dce6"
      text-color="#303133"
      active-text-color="#ffd04b"
      unique-opened
      router
    >
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-submenu
        v-for="item in $store.getters.getUser.menus"
        :key="item.id"
        :index="item.id.toString()"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>

        <el-menu-item
          v-for="item1 in item.children"
          :key="item1.id"
          :index="item1.url"
          >{{ item1.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>
<style lang="less" scoped>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-menu {
  min-height: 520px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>